<template>
    <div class="chart-container" ref="chartContainer"></div>
</template>

<script setup>
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    chartData: {
        type: Array,
        required: true,
        default: () => []
    },
    pollutantType: {
        type: String,
        required: true,
        default: 'pm25'
    }
});

const chartContainer = ref(null);
let chart = null;

const pollutantLabels = {
    pm25: 'PM2.5 (μg/m³)',
    pm10: 'PM10 (μg/m³)',
    no2: 'NO₂ (μg/m³)'
};

const initChart = () => {
    if (!chartContainer.value) return;

    chart = echarts.init(chartContainer.value);
    updateChart();

    window.addEventListener('resize', resizeChart);
};

const updateChart = () => {
    if (!chart) return;

    // 根据污染物类型过滤和排序数据
    const sortedData = [...props.chartData]
        .sort((a, b) => b[props.pollutantType] - a[props.pollutantType])
        .slice(0, 10);

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '12%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            name: pollutantLabels[props.pollutantType],
            nameLocation: 'end',
            nameTextStyle: {
                color: '#666',
                padding: [0, 0, 0, 5]
            },
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#ddd'
                }
            }
        },
        yAxis: {
            type: 'category',
            data: sortedData.map(item => item.area),
            axisLine: {
                lineStyle: {
                    color: '#999'
                }
            },
            axisLabel: {
                color: '#666'
            }
        },
        series: [
            {
                name: pollutantLabels[props.pollutantType],
                type: 'bar',
                data: sortedData.map((item, index) => {
                    return {
                        value: item[props.pollutantType],
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                                {
                                    offset: 0,
                                    color: 'rgba(24, 144, 255, 0.3)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(24, 144, 255, 0.8)'
                                }
                            ])
                        }
                    };
                }),
                label: {
                    show: true,
                    position: 'right',
                    formatter: '{c}'
                },
                barWidth: '60%',
                animationDelay: function (idx) {
                    return idx * 100;
                }
            }
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
            return idx * 5;
        }
    };

    chart.setOption(option, true);
};

const resizeChart = () => {
    chart && chart.resize();
};

watch(() => props.pollutantType, () => {
    updateChart();
});

watch(() => props.chartData, () => {
    updateChart();
}, { deep: true });

onMounted(() => {
    initChart();
});

onBeforeUnmount(() => {
    if (chart) {
        chart.dispose();
        chart = null;
    }
    window.removeEventListener('resize', resizeChart);
});
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 300px;
}
</style>